<template>
  <div style="width: 100%;height: 100%;">
    <div class="pieChart" ref="pieChart"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myChart: null,
      chartOptions: {
        color: [
          "#006cff",
          "#60cda0",
          "#ed8884",
          "#ff9f7f",
          "#0096ff",
          "#9fe6b8",
          "#32c5e9",
          "#1d9dff",
        ],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          // 修改图例组件的文字为 12px
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12",
          },
          bottom: "0%",
          itemWidth: 10,
          itemHeight: 10,
          data: [
            "云南",
            "北京",
            "山东",
            "河北",
            "江苏",
            "浙江",
            "四川",
            "湖北",
          ],
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            // 修改饼形图大小
            radius: ["10%", "60%"],
            center: ["50%", "35%"],
            // roseType: "area",
            roseType: "radius", // 半径模式
            label: {
              fontSize: 10,
            },
            // 引导线调整
            labelLine: {
              // 连接扇形图线长
              length: 6,
              // 连接文字线长
              length2: 8,
            },
            data: [
              { value: 20, name: "云南" },
              { value: 26, name: "北京" },
              { value: 24, name: "山东" },
              { value: 25, name: "河北" },
              { value: 20, name: "江苏" },
              { value: 25, name: "浙江" },
              { value: 30, name: "四川" },
              { value: 42, name: "湖北" },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    this.createEchart();
  },
  methods: {
    createEchart() {
      this.myChart = this.$echarts
        .init(this.$refs.pieChart)
        .setOption(this.chartOptions);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
};
</script>
<style lang="less" scoped>
.pieChart {
  width: 100%;
  height: 100%;
}
</style>
